<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="菜单名称"
        sortable
        width="220"/>
      <el-table-column
        prop="iconCls"
        align="center"
        label="icon"
        width="200"/>
      <el-table-column
        prop="component"
        width="200"
        label="组件"/>
      <el-table-column
        prop="path"
        label="路径"/>
      <el-table-column
        fixed="right"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button style="padding: 3px" type="primary" size="mini" @click="edit(scope.row)">编辑
          </el-button>
          <el-button @click="add(scope.row)" style="padding: 3px" size="mini"
                     type="primary">添加下级
          </el-button>
          <el-button  @click="deleteMenu(scope.row)" style="padding: 3px" size="mini"
                     type="danger">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Menu :menuForm="menu" :menuVisible="menuVisible" :type="type"></Menu>
  </div>
</template>

<script>
import {initMenu} from "../../utils/menus"
import Menu from '../../components/chat/Menu'
export default {
  components: {
    Menu
  },
  name: "SysMenu",
  data() {
    return {
      tableData: [],
      menu: {
        category:'',
        parentId:'',
        enabled: true,
        requireAuth:1,
      },
      menuVisible:false,
      type:false,//编辑
    }
  },
  created() {
    this.initData();
  },
  methods:{
    edit(item){
      this.type = false;
      this.publicMethod(item);
      this.menu = item;
    },
    publicMethod(item){
      this.menuVisible = true;
      if(item.parentId ==null){
        item= Object.assign(item, {category:"1" })
      }else{
        item= Object.assign(item, {category:"0" })
      }
    },
    add(item){
      this.type = true;
      this.publicMethod(item);
      this.menu.category= item.category;
      this.menu.parentId= item.parentId;
    },
    initData(){
      this.getRequest("/system/cfg/allMenu").then((resp)=>{
        if(resp.length>0){
          this.tableData = resp
          console.log(resp)
        }
      })
    },
    deleteMenu(item){
      this.$confirm('此操作将永久删除该菜单及子菜单是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/cfg/deleteMenu/'+item.id).then(resp=>{
          console.log(resp)
          if(resp){
            // this.$store.commit('initRoutes', []);
            this.initData()
            initMenu();
            this.reload()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
